<%inherit file="instance_base.html" />

<%block name="submain">

<div class="row-fluid">

  <div class="span9">
    <div>
      % if SORT_USER or SORT_APPLIANCE or SORT_NODE:
      % if SORT_USER:
      <div>${ _("User") }
        <a href="${ urlupdate({'uid': 'dropthis'}) }">${ _("All") }</a>
        <a class="${ b2s(SORT_USER) }" href="${ reverse_url('admin:user:view') }?id=${ SORT_USER.id }" target="_blank">${ SORT_USER.username }</a></div>
      % endif

      % if SORT_APPLIANCE:
      <div>${ _("Appliance") }
        <a href="${ urlupdate({'aid': 'dropthis'}) }">${ _("All") }</a>
        <a class="${ b2s(SORT_APPLIANCE) }" href="${ reverse_url('admin:appliance') }?id=${ SORT_APPLIANCE.id }" target="_blank">${ SORT_APPLIANCE.name }</a></div>
      % endif

      % if SORT_NODE:
      <div>${ _("Node") }
        <a href="${ urlupdate({'node': 'dropthis'}) }">${ _("All") }</a>
        <a class="${ b2s(SORT_NODE) }" href="${ reverse_url('admin:node') }?id=${ SORT_NODE.id }" target="_blank">${ SORT_NODE.hostname } ( ${ SORT_NODE.ip } )</a></div>
      % endif
      % endif
    </div>

    <div class="input-prepend instance-search">
      <span class="add-on">${ _("Search") }</span>
      <input id="prependedInput" type="text" placeholder="${ _('Input name, id') }">
    </div>

    <div id="instance-list" class="y-checkarea">
      <div>
        <strong>${ _("Total instances: ") }</strong>
        ${ TOTAL_INSTANCE }
      </div>

      <table class="table table-hover table-bordered table-striped">
        <thead>
          <tr>
            <th><i class="icon-check-empty y-check-all"></i></th>
            <th>ID</th>
            <th>${ _("Name") }</th>
            <th>${ _("Owner") }</th>
            <th>
              <i class="icon-exchange"></i>
% if SORTBY == 'cpus':
${ _("CPUS") }
% elif SORTBY == 'memory':
${ _("Memory") }
% elif SORTBY == 'rx':
${ _("RX") }
% elif SORTBY == 'tx':
${ _("TX") }
% elif SORTBY == 'bandwidth':
${ _("Bandwidth") }
% endif
            </th>
            <th>${ _("Updated") }</th>
          </tr>
        </thead>
        <tbody>
          % for I in INSTANCE_LIST:
          <tr class="y-check-line" id="i${ I.id }">
            <td><i class="icon-check-empty y-check"></i></td>
            <td class="y-id">${ I.id }</td>
            <td>
              ${ I.status_icon }
              % if I.isprivate:
              <i class="icon-eye-close"></i>
              % else:
              <i class="icon-ok"></i>
              % endif
              <a href="${ reverse_url('admin:instance:view') }?id=${ I.id }">${ I.name }</a>
            </td>
            <td>
              % if I.user_id:
              <a href="${ reverse_url('admin:user:view') }?id=${ I.user.id }">${ I.user.username }</a>
              % endif
            </td>

            <td>
% if SORTBY == 'cpus':
${ I.cpus } ${ _("core") }
% elif SORTBY == 'memory':
${ I.memory } M
% elif SORTBY == 'rx':
${ human_size(I.rx) }
% elif SORTBY == 'tx':
${ human_size(I.tx) }
% elif SORTBY == 'bandwidth':
${ I.bandwidth } M
% endif
            </td>

            <td>${ htime(I.updated) }</td>
          </tr>
          % endfor
        </tbody>
        <tfoot>
          <tr>
            <td><i class="icon-check-empty y-check-all"></i></td>
            <td colspan="8">
              <a href="" class="y-select-all">${ _("Select All") }</a>
              <span class="divider">/</span>
              <a href="" class="y-unselect-all">${ _("Unselect All") }</a>
              <span class="divider">/</span>
              <a href="" class="y-select-reverse">${ _("Select Reverse") }</a>
            </td>
          </tr>
        </tfoot>
      </table>

      <div>
        <div class="btn-group">
          <a class="btn y-action-nonzero disabled action-setattr" href="${ reverse_url('instance:attr_set') }?attr=isprivate&value=true"><i class="icon-eye-close"></i> ${ _("Private") }</a>
          <a class="btn y-action-nonzero disabled action-setattr" href="${ reverse_url('instance:attr_set') }?attr=isprivate&value=false"><i class="icon-eye-open"></i> ${ _("Public") }</a>
        </div>

        <div class="btn-group">
          <a class="btn y-action-nonzero disabled multi-lifecontrol-opt" data-warning="${ _('This batch start has been selected instances.') }" title="${ _('Start the selected instances.') }" href="${ reverse_url('instance:lifecontrol') }?action=run"><i class="icon-refresh"></i> ${ _("Run") }</a>
          <a class="btn y-action-nonzero disabled multi-lifecontrol-opt" data-warning="${ _('This batch stop has been selected instances.') }" title="${ _('Stop the selected instances.') }" href="${ reverse_url('instance:lifecontrol') }?action=stop"><i class="icon-off"></i> ${ _("Stop") }</a>
          <a class="btn y-action-nonzero disabled multi-lifecontrol-opt" data-warning="${ _('This batch query has been selected instances.') }" title="${ _('Query the selected instances.') }" href="${ reverse_url('instance:lifecontrol') }?action=query"><i class="icon-question-sign"></i> ${ _("Query") }</a>
        </div>

        <div class="btn-group">
          <a class="btn btn-danger y-action-nonzero disabled multi-lifecontrol-opt" data-warning="${ _('Delete the instance is a very dangerous action, please be careful !') }" title="${ _('Delete the selected instances.') }" href="${ reverse_url('instance:delete') }"><i class="icon-trash"></i> ${ _("Delete") }</a>
        </div>

      </div>

      ${ PAGE_HTML }

      <script type="text/javascript">
      $( function() {
        y_checkarea_binding();
        instance_list_attr_set(".action-setattr");
      })
      </script>

    </div>

  </div>


  <div class="span3">
    <h5><i class="icon-sort"></i> ${ _("Sort By") }</h5>
    <select id="sort-by-obj">
      <option value="default">${ _("Default") }</option>
      <option value="cpus">${ _("Cpus") }</option>
      <option value="memory">${ _("Memory") }</option>
      <option value="rx">${ _("RX") }</option>
      <option value="tx">${ _("TX") }</option>
      <option value="bandwidth">${ _("Bandwidth") }</option>
      <option value="name">${ _("Name") }</option>
      <option value="status">${ _("Status") }</option>
      <option value="user_id">${ _("Owner") }</option>
      <option value="appliance_id">${ _("Appliance") }</option>
      <option value="created">${ _("Created") }</option>
      <option value="updated">${ _("Updated") }</option>
    </select>

    <h5><i class="icon-sort"></i> ${ _("Instance Status") }</h5>
    <select id="sort-by-status">
      <option value="">${ _("Default") }</option>
      <option value="stoped">${ _("Stoped") }</option>
      <option value="running">${ _("Running") }</option>
##      <option value="suspend">${ _("Suspend") }</option>
      <option value="query">${ _("Query") }</option>
      <option value="deleted">${ _("Deteled") }</option>
    </select>

    <h5><i class="icon-sort"></i> ${ _("User Group") }</h5>
    <select id="sort-by-user-group">
      <option value="all">${ _("All") }</option>
      %for G in GROUP_LIST:
      <option value="${ G.id }">${ _(G.name) }</option>
      %endfor
    </select>

    <h5><i class="icon-sort"></i> ${ _("Sort") }</h5>
    <select id="sort-by-order">
      <option value="DESC">${ _("Descending") }</option>
      <option value="ASC">${ _("Ascending") }</option>
    </select>
  </div>

</div>


<div style="display:none;" id="xsrf-cookie">${ xsrf_cookie }</div>

## Normal Ajax option
<div style="display:none;" id="multi-lifecontrol-window" class="modal hide fade">
  <div class="modal-header">
    <h2 class="title">${ _("Multi Instance LifeControl") }</h2>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <button class="btn btn-danger ok-btn">${ _("I'm sure") }</button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">${ _("Close") }</button>
  </div>
</div>
<div style="display:none;" id="multi-lifecontrol-window-body">
  <div class="text-center text-warning">
    <div class="warning well"></div>
  </div>
  <div><strong>${ _("Do you want to continue to do so ?") }</strong></div>
</div>

<script type="text/javascript" src="${ theme_url('js/myun-instance.js') }"></script>
<script type="text/javascript" src="${ theme_url('js/instance-control.js') }"></script>

<script type="text/javascript">
$( function() {
    admin_instance_search( "${ urlupdate({'search': 'REPLACEOBJ', 'p': 1, 'ajax': 'true' }) }" );
    multi_instance_lifecontrol()

    $("#sort-by-obj").val("${ SORTBY }");
    $("#sort-by-status").val("${ STATUS }");
    $("#sort-by-user-group").val("${ USER_GROUP_ID }");
    $("#sort-by-order").val("${ SORT }");

    selected_reload("#sort-by-obj", "${ urlupdate({'by': 'REPLACEOBJ'}) }")
    selected_reload("#sort-by-status", "${ urlupdate({'status': 'REPLACEOBJ'}) }")
    selected_reload("#sort-by-user-group", "${ urlupdate({'user_group': 'REPLACEOBJ'}) }")
    selected_reload("#sort-by-order", "${ urlupdate({'sort': 'REPLACEOBJ'}) }")
});
</script>

</%block>
